$def with (strategy_info,strategy_info_1,strategy_info_2)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="header">
    <div class="column">
        <img class="logo" src="http://our8pafcg.bkt.clouddn.com/zhike/images/logo.png" alt="智客">
    </div>
    <div class="column column-right">
        <a href="/" class="active-tab">首页</a>
        <a id="study_id" href="/study">开始研究</a>
        <a id="personal_center_id" href="/personal_center">个人中心</a>
        <a id="help_id" href="/help">帮助</a>
        <a href='/login'>
            <button class="btn btn-primary btn-radius btn-login">登录</button>
        </a>
        <a id="register_id" href="/register">注册</a>
    </div>
</header>
<div class="banner">
    <div class="bg-layer">
        <p class="msg">AI智客，大数据和机器智能时代的量化投资</p>
        <p class="desc">为量化投资者提供华尔街专业机构的设备</p>
        <button class="btn btn-radius">了解更多</button>
    </div>

</div>
<div class="benefit">
    <div>
        <i class="iconfont icon-security"></i>
        <div class="benefit-desc-wrapper">
            <p class="benefit-name">安全靠谱</p>
            <span class="benefit-desc">保障策略100%安全</span>
        </div>
    </div>
    <div>
        <i class="iconfont icon-precise"></i>
        <div class="benefit-desc-wrapper">
            <p class="benefit-name">精准分析</p>
            <span class="benefit-desc">高质量的精准数据</span>
        </div>
    </div>
    <div>
        <i class="iconfont icon-topspeed"></i>
        <div class="benefit-desc-wrapper">
            <p class="benefit-name">极速回测</p>
            <span class="benefit-desc">精准且极速的回测</span>
        </div>
    </div>
    <div>
        <i class="iconfont icon-invite"></i>
        <div class="benefit-desc-wrapper">
            <p class="benefit-name">邀请奖励</p>
            <span class="benefit-desc">一笔投资多笔获利</span>
        </div>
    </div>
</div>

<div class="tactics-wrapper">
    <h4>推荐策略</h4>
    <div class="recommond-wrapper">
        $for item in strategy_info[:3]:
        <div class="recommond-item">
            <div class="tactics-index">TOP$loop.index</div>
            <p class="title recommond-item_detail">$item["strategy_name"]&nbsp;</p>
            <p class="recommond-item_detail" class="profit-num">$item["total_gain_rate"]%</p>
            <p class="recommond-item_detail" class="all-profit-text">总收益</p>
            <p hidden class="strategy_id_cls"> $item['_id']</p>
            <span class="recommond-item_detail" class="tactics-type">$item["strategy_type"]</span>
            <div class="chart-wrapper">$loop.index</div>
            <button class="btn btn-primary btn-block btn-radius btn-subscribe">立即订阅</button>
            <div class="tactics-extra clearfix">
                <div class="pull-left">发布者:$item["username"]</div>
                <div class="scribe-info">订阅数:$item["subscribe_count"]&nbsp;&nbsp;订阅费:$item["price"]元/月</div>
            </div>
        </div>
    </div>

    <h4>热门策略</h4>
    <div class="hot-tactics-wrapper">
        <div class="hot-left-wrapper">
            <i class="iconfont icon-licai"></i>
            <div class="hot-left-top">
                <p>安全靠谱</p>
                <p>&emsp;&emsp;极速回测</p>
            </div>
        </div>

        <div class="hot-right-wrapper">
            <div class="hot-tactics-item">
                $strategy_info_1[0]["strategy_name"]
                <div class="hot-tactics-row1 clearfix">
                    策略类别：$strategy_info_1[0]["strategy_type"]
                    <div class="pull-right">
                        总收益：<span class="all-profit">$strategy_info_1[0]["total_gain_rate"]%</span>
                    </div>
                </div>
                <div class="hot-tactics-row2">
                    <div id="subscribe_count_0" >订阅数：$strategy_info_1[0]["subscribe_count"]&emsp;订阅费：$strategy_info_1[0]["price"]元/月</div>
                    <div hidden class="strategy_id_cls"> $strategy_info_1[0]['_id']</div>
                    <div>
                        <button class="btn btn-scribe btn-subscribe">立即订阅</button>
                    </div>
                </div>
            </div>
            <div class="hot-tactics-item">
                $strategy_info_1[1]["strategy_name"]
                <div class="hot-tactics-row1 clearfix">
                    策略类别：$strategy_info_1[1]["strategy_type"]
                    <div class="pull-right">
                        总收益：<span class="all-profit">$strategy_info_1[1]["total_gain_rate"]%</span>
                    </div>
                </div>
                <div class="hot-tactics-row2">
                    <div id="subscribe_count_1">订阅数：$strategy_info_1[1]["subscribe_count"]&emsp;订阅费：$strategy_info_1[1]["price"]元/月</div>
                    <div hidden class="strategy_id_cls"> $strategy_info_1[1]['_id']</div>
                    <div>
                        <button class="btn btn-scribe btn-subscribe">立即订阅</button>
                    </div>
                </div>
            </div>
            <div class="hot-tactics-item">
                $strategy_info_1[2]["strategy_name"]
                <div class="hot-tactics-row1 clearfix">
                    策略类别：$strategy_info_1[2]["strategy_type"]
                    <div class="pull-right">
                        总收益：<span id="total_gain_2" class="all-profit">$strategy_info_1[2]["total_gain_rate"]%</span>
                    </div>
                </div>
                <div class="hot-tactics-row2">
                    <div id="subscribe_count_2">订阅数：$strategy_info_1[2]["subscribe_count"]&emsp;订阅费：$strategy_info_1[2]["price"]元/月</div>
                    <div hidden class="strategy_id_cls"> $strategy_info_1[2]['_id']</div>
                    <div>
                        <button class="btn btn-scribe btn-subscribe">立即订阅</button>
                    </div>
                </div>
            </div>
            <div class="hot-tactics-item">
                $strategy_info_1[3]["strategy_name"]
                <div class="hot-tactics-row1 clearfix">
                    策略类别：$strategy_info_1[3]["strategy_type"]
                    <div class="pull-right">
                        总收益：<span class="all-profit">$strategy_info_1[3]["total_gain_rate"]%</span>
                    </div>
                </div>
                <div class="hot-tactics-row2">
                    <div id="subscribe_count_3">订阅数：$strategy_info_1[3]["subscribe_count"]&emsp;订阅费：$strategy_info_1[3]["price"]元/月</div>
                    <div hidden class="strategy_id_cls"> $strategy_info_1[3]['_id']</div>
                    <div>
                        <button class="btn btn-scribe btn-subscribe">立即订阅</button>
                    </div>
                </div>
            </div>
        </div>  <!--class="hot-right-wrapper"-->
    </div>  <!--class="hot-right-wrapper"-->

    <h4>全部策略</h4>

    <div class="table-wrapper">
        <table class="all-tatics-table">
            <tbody>
                $for item2 in strategy_info_2:
                <tr class="strategy_name_cls">
                    <td colspan="6">$loop.index. $item2['strategy_name']</td>
                </tr>
                <tr class="strategy_keys_cls">
                    <td>总收益</td>
                    <td>发布者</td>
                    <td>策略类型</td>
                    <td>订阅数</td>
                    <td>订阅费</td>
                    <td rowspan="2" class="btn-column">
                        <button class="btn btn-update">修改策略</button>
                    </td>
                </tr>
                <tr class="strategy_values_cls">
                    <td><span class="all-profit">$item2['total_gain_rate']%</span></td>
                    <td class="strategy_username_cls">$item2['username']</td>
                    <td>$item2['strategy_type']</td>
                    <td>$item2['subscribe_count']</td>
                    <td>$item2['price']元/月</td>
                    <td hidden class="strategy_phonenumber_cls">$item2['phonenumber']</td>
                    <td hidden class="strategy_cls2">$item2['_id']</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<footer class="footer">
    <div class="inner-wrap">
        <div>
            <p class="col-title"><i class="iconfont icon-link"></i>&nbsp;相关链接</p>
            <div class="content">
                <a href="http://www.datayes.com/" target="_blank">通联数据</a>&nbsp;&nbsp;让投资更容易
                <br/>
                <a href="http://m.datayes.com/" target="_blank">数据商城</a>&nbsp;&nbsp;海量金融大数据
                <br/>
                <a href="https://mof.datayes.com/" target="_blank">通联魔方</a>&nbsp;&nbsp;MOM/FOF全流程管理平台
                <br/>
                <a href="https://robo.tt/home/" target="_blank">萝卜投研</a>&nbsp;&nbsp;智能投研平台
                <br/>
                <a href="http://www.jinlingxuetang.com" target="_blank">金领学堂</a>&nbsp;&nbsp;学习更便捷
            </div>
        </div>
        <div>
            <p class="col-title"><i class="iconfont icon-location"></i>&nbsp;联系地址</p>
            <div class="content">
                总部地址： 北京市朝阳区望京街道保利国际广场T2-303
                <br/>成都分部： 四川省成都市天府大道中段希顿广场C座701
            </div>
        </div>
        <div>
            <p class="col-title"><i class="iconfont icon-telephone"></i>&nbsp;联系方式</p>
            <div class="content">
                电话: 400-696-8026
            </div>
        </div>
        <div class="qrcode-wrapper">
            <img class="qrcodeimg" src="https://uqer.io/home/img/code.jpg" alt="二维码"><br>
            <span>扫描二维码关注公众号</span>
        </div>
    </div>
    <br>
    <p class="copyright">
        <span>© 2017 <a href="http://www.datayes.com/" target="_blank">DataYes</a></span>
        <a class="icp" href="http://www.miibeian.gov.cn/" target="_blank">沪ICP备13045831号</a>
        <span>咨询热线：4000 820 386</span>
        <span>智客 Beta</span>
        <a href="http://www.datayes.com/protocol" target="_blank">用户协议</a>
    </p>
</footer>

<script src="http://our8pafcg.bkt.clouddn.com/zhike//js/echarts.min.js"></script>
<script src="/js/jquery.js"></script>
<!-- 统计图 -->
<script src="http://our8pafcg.bkt.clouddn.com/zhike/./js/echarts.min.js?v=1"></script>

<script src="/js/validation_study.js"></script>
<script src="/js/validation_help.js"></script>
<script src="/js/validation_personal_center.js"></script>
<script src="/js/href_detail.js"></script>

<!-- For update strategy: onclick btn-update -->
<script src="/js/update_strategy_index.js"></script> 

<!--For islogin-->
<script src="/js/validation_islogin_index.js"></script>

<script>

   jQuery(document).ready(function(){

        //hide btn-update for other users and not loged-in users
        if(document.cookie == "" || document.cookie == undefined || document.cookie ==  null ){
            //alert("COOKIE isNull");
            jQuery(".btn-update,.btn-subscribe,.btn-comment").hide();
        }
        else{
            jQuery.ajax({
                scriptCharset: 'utf-8',
                type: "POST",
                url: "/current_user",
                contentType:"application/json",
                data: JSON.stringify({
                    "phonenumber": document.cookie.split(';')[1].split('=')[1],
                    "uid": document.cookie.split(';')[0].split('=')[1]
                }),
                dataType: "json",
                success: function(success) {
                    jQuery(".strategy_values_cls").each(function(index,element){
                        var g_acount = success.user_phone;
                        var acount = jQuery(element).children(".strategy_phonenumber_cls").text();
                        if (g_acount == null || g_acount == undefined || g_acount == ""|| acount != g_acount){
                            //alert("g_acount:" + g_acount +",pub: "+jQuery(element).children(".strategy_phonenumber_cls").text());
                            //alert("name of button: "+ jQuery(element).prev().find(".btn-update").attr("class"));
                            jQuery(element).prev().find(".btn-update").hide();
                        }
                    });
                },
                error: function(error) {
                    //alert("EORROR current user.");
                }
            });
        }
        jQuery(".btn-subscribe").on("click", function(event){
            event.stopPropagation();
            var strategy_obj = jQuery(event.target).siblings(".strategy_id_cls");
            if(strategy_obj.length === 0){
                strategy_obj = jQuery(event.target).parent().siblings(".strategy_id_cls");
            }

            event.preventDefault();
            jQuery.ajax({
                scriptCharset: 'utf-8',
                type: "POST",
                url: "/subscribe",
                contentType:"application/json",
                data: JSON.stringify({
                    "phonenumber": document.cookie.split(';')[1].split('=')[1],
                    "strategy_id": strategy_obj.text()
                }),
                dataType: "json",
                success: function(success) {
                    //alert("Subscribed.");
		    //需要局部刷新
                    window.location.reload(true);
                },
                error: function(error) {
                    //alert("NOT subscribed.");

                }
            });
        });

        jQuery.ajax({
            scriptCharset: 'utf-8',
            type: "POST",
            url: "/",
            contentType:"application/json",
            data: JSON.stringify({
            }),
            dataType: "json",
            success: function(result) {
                //alert("Success--");
                var date = result["listdate"];
                var data = result["listdata"];
                jQuery(".chart-wrapper").each(function(index,element){
                    //alert(index);
                    //alert(element);
                    //alert(date[index]);
                    //alert(data[index]);
                    // 使用 DOM节点 初始化echarts实例
                    var chart = echarts.init(element);


                    //基础配置
                    var baseOption = {
                        title: {
                          show: false // 隐藏标题
                        },
                        grid: {
                          show: false,
                          left: 0,
                          top: 0,
                          right: 0,
                          bottom: 1
                        },
                        xAxis: {
                          show: true, // 隐藏 X 轴
                          type: 'category', // 类目轴
                          boundaryGap: false, // 两边不留白
                          data: []
                        },
                        yAxis: {
                          show: true, // 隐藏 Y 轴
                          type: 'value',
                          axisLine: {
                            show: false // 不显示轴线
                          }
                        },
                        series: [{
                          type: 'line', // 折线图
                          smooth: true, // 平滑曲线(弧线)
                          symbol: 'none', // 没有标记图形
                          sampling: 'average', // 优化图表的绘制效率,取过滤点的平均值
                          areaStyle: { // 区域填充样式
                            normal: {
                              color: 'rgba(73, 152, 244, 0.1)'
                            }
                          },
                          data: [],
                          color: ['#328bf4']
                        }]
                      }; // 基础配置
                      // 基础配置
                      chart.setOption(baseOption);

                      //导入数据
                      chart.setOption({
                        xAxis:{data: date[index]},
                        series: [{data: data[index]}]
                      });
                });
            },
            error: function(error) {
                //alert("Ajax index Error.");
            }
        });

   });

</script>

</body>
</html>
